<script setup>
import { ref, onMounted } from 'vue'
import PageContainer from '@/components/PageContainer.vue'
import { User, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import {
  adminGetAdminInfoService,
  adminUpdateAdminInfoService,
  adminUpdatePasswordService,
  adminAddAdminService
} from '@/api/admin'

const router = useRouter()
const accountInfo = ref({})
const originalAccountInfo = ref({})

const getAdminInfo = async () => {
  const {
    data: { data }
  } = await adminGetAdminInfoService()
  accountInfo.value = data
  originalAccountInfo.value = { ...data }
  console.log(accountInfo.value)
}
onMounted(() => {
  getAdminInfo()
})
// 重置密码表单相关
const pwdForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const formRef = ref()

const onSubmit = async () => {
  const valid = await formRef.value.validate()
  if (valid) {
    await adminUpdatePasswordService(pwdForm.value)
    ElMessage({ type: 'success', message: '更换密码成功' })
    // 可根据实际情况清空token等
    router.push('/login')
  }
}
const onReset = () => {
  formRef.value.resetFields(pwdForm.value)
  pwdForm.value.oldPassword = ''
  pwdForm.value.newPassword = ''
  pwdForm.value.confirmPassword = ''
}

const checkOldSame = (rule, value, cb) => {
  if (value === pwdForm.value.oldPassword) {
    cb(new Error('原密码和新密码不能一样!'))
  } else {
    cb()
  }
}

const checkNewSame = (rule, value, cb) => {
  if (value !== pwdForm.value.newPassword) {
    cb(new Error('新密码和确认再次输入的新密码不一样!'))
  } else {
    cb()
  }
}
const rules = {
  oldPassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码长度必须是6-15位的非空字符串',
      trigger: 'blur'
    }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码长度必须是6-15位的非空字符串',
      trigger: 'blur'
    },
    { validator: checkOldSame, trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次确认新密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码长度必须是6-15位的非空字符串',
      trigger: 'blur'
    },
    { validator: checkNewSame, trigger: 'blur' }
  ]
}

const infoRules = {
  manageId: [
    { required: true, message: '请输入管理员ID', trigger: 'blur' },
    { pattern: /^\d{6}$/, message: '管理员ID必须为6位数字', trigger: 'blur' }
  ],
  username: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在2-20个字符', trigger: 'blur' }
  ]
}
const infoFormRef = ref()

const onEditInfo = async () => {
  await infoFormRef.value.validate()
  // 判断有无变化
  console.log(accountInfo.value)
  console.log(originalAccountInfo.value)
  if (
    accountInfo.value.manageId === originalAccountInfo.value.manageId &&
    accountInfo.value.username === originalAccountInfo.value.username
  ) {
    ElMessage.info('信息未发生变化，无需保存')
    return
  }
  accountInfo.value.manageId = +accountInfo.value.manageId
  const {
    data: { data }
  } = await adminUpdateAdminInfoService(accountInfo.value)
  console.log(data)
  ElMessage.info('修改信息成功')
  getAdminInfo()
}

// 添加管理员表单数据和方法
const addAdminForm = ref({
  manageId: '',
  username: '',
  password: ''
})
const addAdminFormRef = ref()
const handleAddAdmin = async () => {
  await addAdminFormRef.value.validate()
  // 判断有无输入
  if (
    !addAdminForm.value.manageId ||
    !addAdminForm.value.username ||
    !addAdminForm.value.password
  ) {
    ElMessage.error('请填写完整信息')
    return
  }
  addAdminForm.value.manageId = +addAdminForm.value.manageId
  await adminAddAdminService(addAdminForm.value)
  ElMessage.success('添加管理员成功')
  addAdminForm.value.manageId = ''
  addAdminForm.value.username = ''
  addAdminForm.value.password = ''
  getAdminInfo()
}
</script>
<template>
  <div class="main1">
    <PageContainer title="管理员账号信息">
      <template #extra>
        <el-button type="primary" @click="onEditInfo">修改信息</el-button>
      </template>
      <!-- 账号信息卡片 -->
      <el-card class="account-card" shadow="never">
        <template #header>
          <div class="card-header">
            <el-icon class="header-icon"><User /></el-icon>
            <span class="card-title">账号信息</span>
          </div>
        </template>
        <el-form
          :model="accountInfo"
          :rules="infoRules"
          ref="infoFormRef"
          label-width="0px"
        >
          <div class="account-info-row">
            <div class="info-item">
              <span class="info-label">管理员ID:</span>
              <el-form-item prop="manageId" style="margin-bottom: 0">
                <el-input
                  v-model="accountInfo.manageId"
                  class="info-value"
                  style="width: 180px"
                />
              </el-form-item>
            </div>
            <div class="info-item">
              <span class="info-label">用户名：</span>
              <el-form-item prop="username" style="margin-bottom: 0">
                <el-input
                  v-model="accountInfo.username"
                  class="info-value"
                  style="width: 180px"
                />
              </el-form-item>
            </div>
            <div class="info-item">
              <span class="info-label">账号类型：</span>
              <span class="info-value">系统管理员</span>
            </div>
          </div>
        </el-form>
      </el-card>

      <!-- 重置密码卡片 -->
      <el-card class="reset-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon style="color: #2176d2"><Lock /></el-icon>
            <span class="card-title">重置密码</span>
          </div>
        </template>
        <el-row>
          <el-col :span="12">
            <el-form
              :model="pwdForm"
              :rules="rules"
              ref="formRef"
              label-width="100px"
              size="large"
            >
              <el-form-item label="原密码" prop="oldPassword">
                <el-input
                  v-model="pwdForm.oldPassword"
                  type="password"
                ></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="newPassword">
                <el-input
                  v-model="pwdForm.newPassword"
                  type="password"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认新密码" prop="confirmPassword">
                <el-input
                  v-model="pwdForm.confirmPassword"
                  type="password"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="onSubmit" type="primary">修改密码</el-button>
                <el-button @click="onReset">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="account-card" shadow="never">
        <template #header>
          <div class="card-header">
            <el-icon class="header-icon"><User /></el-icon>
            <span class="card-title">添加管理员</span>
          </div>
        </template>
        <el-form
          :model="addAdminForm"
          :rules="infoRules"
          ref="addAdminFormRef"
          label-width="0px"
        >
          <div class="account-info-row">
            <div class="info-item">
              <span class="info-label">管理员ID:</span>
              <el-form-item prop="manageId" style="margin-bottom: 0">
                <el-input
                  v-model="addAdminForm.manageId"
                  class="info-value"
                  style="width: 180px"
                />
              </el-form-item>
            </div>
            <div class="info-item">
              <span class="info-label">用户名：</span>
              <el-form-item prop="username" style="margin-bottom: 0">
                <el-input
                  v-model="addAdminForm.username"
                  class="info-value"
                  style="width: 180px"
                />
              </el-form-item>
            </div>
            <div class="info-item">
              <span class="info-label">密码：</span>
              <el-form-item prop="password" style="margin-bottom: 0">
                <el-input
                  v-model="addAdminForm.password"
                  class="info-value"
                  style="width: 180px"
                  type="password"
                />
              </el-form-item>
            </div>
            <div class="info-item">
              <span class="info-label">账号类型：</span>
              <span class="info-value">系统管理员</span>
            </div>
          </div>
          <div
            style="display: flex; justify-content: flex-end; margin-top: 20px"
          >
            <el-button type="primary" @click="handleAddAdmin"
              >添加管理员</el-button
            >
          </div>
        </el-form>
      </el-card>
    </PageContainer>
  </div>
</template>

<style scoped lang="less">
.account-card {
  margin-bottom: 24px;
  background: #f7fafd;
  border: 1px solid #e6ecf3;
  box-shadow: none;
  border-radius: 8px;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  padding: 0 0 8px 0;
}
.header-icon {
  color: #2176d2;
  font-size: 20px;
}
.card-title {
  color: #2176d2;
  font-size: 18px;
  font-weight: bold;
}
.account-info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 48px;
  padding: 12px 0 8px 0;
}
.info-item {
  display: flex;
  align-items: center;
  min-width: 180px;
  font-size: 15px;
  margin-bottom: 8px;
}
.info-label {
  color: #222;
  font-weight: 500;
  margin-right: 4px;
}
.info-value {
  color: #2176d2;
  font-weight: 400;
}
.status-normal {
  display: inline-block;
  background: #e6f9ea;
  color: #3bb66c;
  border-radius: 12px;
  padding: 2px 14px;
  font-size: 14px;
  font-weight: 500;
  margin-left: 2px;
}
.reset-card {
  margin-bottom: 24px;
}
</style>
